<template>
  <div class="drag-container" @mousemove="moving">
    <div class="drag-el" @mousedown="startMove" :style="{left:pxToRem(posX) + 'rem',top:pxToRem(posY) + 'rem',transform:'scale('+scale_rate/100+')'}">
      <div>1366</div>
      <div>{{pxToRem(posX)}}rem</div>
      <div>{{pxToRem(posY)}}rem</div>
    </div>
    <ul class="scale-handle-box">
      <li @click="increaseScale">+</li>
      <li @click="reduceScale">-</li>
    </ul>
  </div>
</template>
<script>
export default {
  name:'Drag1',
  data(){
    return {
      scale_step:10,
      scale_rate:100,
      move_started:0,
      posX:0,
      posY:0,
      orgX:0,
      orgY:0,
    }
  },
  methods:{
    rf:()=>{},
    startMove(e){
      e=e||window.event;
      this.move_started=1;
      this.orgX=e.clientX - this.posX;
      this.orgY=e.clientY - this.posY;
      document.onmouseup= e=>{
        this.move_started=0;
        document.onmouseup = null;
      }
      // console.log(this.move_started,this.orgX,this.orgY,e.clientX,e.clientY,[e.layerX,e.layerY])
    },
    pxToRem(num){
      if(typeof num=="string"&&~num.indexOf('rem')){
        return num;
      }
      let winWidth = document.documentElement.offsetWidth ||
      document.body.offsetWidth;
      winWidth = winWidth < 900 ? 900 : winWidth;
      let rem= num*(1366/winWidth/100);
      if(!isNaN(rem)){
        return rem
      }else{
        return 0
      }
    },
    moving(e){
      e=e||window.event;
      if(this.move_started){
        this.posX=e.clientX - this.orgX;
        this.posY=e.clientY - this.orgY;
        console.log('move',e.clientX,this.orgX,this.posX,this.pxToRem(this.posX))
      }
    },
    increaseScale(){
      if(this.scale_rate>300){return;}
      this.scale_rate+=this.scale_step;
    },
    reduceScale(){
      if(this.scale_rate<30){return;}
      this.scale_rate-=this.scale_step;
    },
  },
}
</script>
<style scoped lang="stylus">
.drag-container{
  position:relative;
  width:100%;
  height:100%;
  user-select: none;
  .drag-el{
    position:absolute;
    width:.5rem;
    height:.5rem;
    background-color:#f66;
  }
  .scale-handle-box{
    position:absolute;
    bottom:.2rem;
    right:.2rem;
    >li{
      background:#eee;
      cursor:pointer;
      width:.2rem;
      height:.2rem;
      border-radius:50%;
      margin-top:.2rem;
      text-align:center;
      line-height:.2rem;
      font-size:.18rem;
    }
  }
}
</style>

